<template>
  <div class="dashboard-editor-container">
    <div class="filter-container">
      <!--      <el-input v-model="position" placeholder="位置导航" style="width: 200px;" class="filter-item"-->
      <!--                :disabled="true"-->
      <!--      />-->
      <!--      @keyup.enter.native="handleFilter"-->
      <!--      <el-button v-waves class="filter-item" type="primary" icon="el-icon-s-help" @click="showDialog=true">-->
      <!--        选择位置导航-->
      <!--      </el-button>-->
      <!--      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search">-->
      <!--        刷新-->
      <!--      </el-button>-->
      <el-date-picker
        v-model="startTime"
        type="datetime"
        placeholder="选择开始时间"
        class="filter-item"
        align="right"
        value-format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptions"
        @change="startSend"
      />
      <el-date-picker
        v-model="endTime"
        type="datetime"
        placeholder="选择结束时间"
        class="filter-item"
        align="right"
        style="margin-right: 50px"
        :picker-options="pickerOptions"
        @change="startSend"
      />
      <el-radio-group
        v-for="item in [{id:1,name:'15分钟'},{id:2,name:'1小时'},{id:3,name:'本日'},{id:4,name:'本周'}]"
        :key="item.id"
        v-model="selectDuring"
        class="filter-item"
        style="margin-left: 5px"
        @change="duringChoose"
      >
        <el-radio-button :label="item.id">{{ item.name }}</el-radio-button>
      </el-radio-group>
    </div>
    <!--    <div class="wrap">-->
    <!--      <div id="left">-->
    <!--      </div>-->
    <!--      <div id="right">-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="wrap">

      <div id="left">
        <div style="margin: 16px 16px 0;">位置导航</div>
        <el-tree
          :data="data"
          node-key="id"
          :default-expanded-keys="[]"
          :default-checked-keys="[5]"
          :props="defaultProps"
          @node-click="selectKey"
        />
      </div>
      <div id="right">

        <el-row :gutter="32">
          <el-col :xs="24" :sm="24" :lg="8">
            <div class="chart-wrapper">
              设备产能
              <pie-chart :chart-data="pieChartData" />
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="14">
            <div class="chart-wrapper">
              车间总耗电量
              <line-chart :chart-data="lineChartData" />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import LineChart from './components/LineChart'
import PieChart from './components/PieChart'
import { service2 as http } from '@/utils/request'

export default {
  name: 'DashboardAdmin',
  components: {
    LineChart,
    PieChart
  },
  data() {
    return {
      showDialog: false,
      position: '',
      selectDuring: 0,
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      startTime: '',
      endTime: '',
      lineChartData: {},
      pieChartData: {},
      selectFactoryId: undefined,
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  mounted() {
    http({
      url: '/util/powerTime',
      method: 'get'
    }).then(res => {
      this.startTime = res.data.yesterday
      this.endTime = res.data.today
      http({
        url: '/org/getFactory',
        method: 'get'
      }).then(res => {
        this.data = res.list
        this.selectFactoryId = res.list[0].id
      })
    })
  },
  methods: {
    startSend() {
      this.getChart()
    },
    duringChoose(index) {
      http({
        url: '/util/powerTimeSection',
        method: 'get'
      }).then(res => {
        switch (index) {
          case 1:
            this.startTime = res.data.before15Min
            break
          case 2:
            this.startTime = res.data.before1H
            break
          case 3:
            this.startTime = res.data.today0Time
            break
          case 4:
            this.startTime = res.data.thisMonday
            break
        }
        this.endTime = res.data.todayEnd
        this.getChart()
      })
    },
    getChart() {
      http({
        url: '/power/homeChart',
        method: 'get',
        params: {
          id: this.selectFactoryId,
          startTime: this.startTime,
          endTime: this.endTime
        }
      }).then(res => {
        if (res.code !== 1) {
          this.$notify({
            title: '服务器错误',
            message: '联系管理员',
            type: 'error',
            duration: 2000
          })
          return
        }
        this.pieChartData = res.data.pieData
        this.lineChartData = res.data.lineData
      })
    },
    selectKey(a, node, c) {
      // console.info(a, node, c)
      this.selectFactoryId = node.data.id
      this.getChart()
    }
  }
}
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    position: relative;

    .github-corner {
      position: absolute;
      top: 0px;
      border: 0;
      right: 0;
    }

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;

    }
  }

  .wrap {
    margin: 0 auto;
    width: 100%;
    border: 1px solid #E6E6E6;
  }

  #left {
    width: 15%;
    height: 500px;
    border-right: 1px solid #E6E6E6;
    float: left;
  }

  #right {
    width: 80%;
    height: 500px;
    margin-left: 15%;
  }

  /*@media (max-width: 1024px) {*/
  /*  .chart-wrapper {*/
  /*    padding: 8px;*/
  /*  }*/
  /*}*/
</style>
